<template>
	<view>
		<uni-forms :modelValue="baseFormData" label-width="250rpx">
			<uni-forms-item label="负责人">
				<uni-easyinput v-model="baseFormData.director" placeholder="请输入姓名" />
			</uni-forms-item>
			<view style="border: 1rpx solid #EAEAEA; margin:10rpx 0;"></view>
			<uni-forms-item label="身份证号码">
				<uni-easyinput v-model="baseFormData.idCard" placeholder="请输入负责人身份证号码" />
			</uni-forms-item>
			<view style="border: 1rpx solid #EAEAEA; margin:10rpx 0;"></view>
			<uni-forms-item label="手机号">
				<uni-easyinput v-model="baseFormData.mobile" placeholder="请输入手机号" />
			</uni-forms-item>
			<view style="border: 1rpx solid #EAEAEA; margin:10rpx 0;"></view>
			<uni-forms-item label="验证码">
				<view style="display: flex; width: 440rpx;">
					<view style="width: 250rpx;">
						<uni-easyinput v-model="baseFormData.captcha" placeholder="请输入验证码" />
					</view>
					<view v-if="isAuthCode" class="check">
						<uni-countdown :show-day="false" :showHour="false" :showMinute="false" :second="timeupSecond"
							@timeup="timeup" />
					</view>
					<view v-if="!isAuthCode" class="check">
						<view class="authCode" @click="isHide">获取验证码</view>
					</view>
				</view>
			</uni-forms-item>
			<view style="border: 1rpx solid #EAEAEA; margin:10rpx 0;"></view>
			<uni-forms-item label="店名">
				<uni-easyinput v-model="baseFormData.name" placeholder="请输入店名" />
			</uni-forms-item>
			<view style="border: 1rpx solid #EAEAEA; margin:10rpx 0;"></view>
			<uni-forms-item label="工商营业执照号码">
				<uni-easyinput v-model="baseFormData.businessLicenseId" placeholder="请输入工商营业执照号码" />
			</uni-forms-item>
			<view style="border: 1rpx solid #EAEAEA; margin:10rpx 0;"></view>
			<uni-forms-item label="经营区域">
				<view @click="btn" class="area">{{baseFormData.operatingArea}}</view>
				<lb-picker ref="picker" mode="multiSelector" :list="areaList" :level="3" @confirm="areaConfirm">
				</lb-picker>
			</uni-forms-item>
			<view style="border: 1rpx solid #EAEAEA; margin:10rpx 0;"></view>
			<uni-forms-item label="地址">
				<uni-easyinput v-model="baseFormData.address" placeholder="请输入详细地址" />
			</uni-forms-item>
			<view style="border: 1rpx solid #EAEAEA; margin:10rpx 0;"></view>
			<uni-forms-item label="营业开始时间">
				<view @click="onSelectStartTime" class="area">{{baseFormData.startTime}}</view>
			</uni-forms-item>
			<view style="border: 1rpx solid #EAEAEA; margin:10rpx 0;"></view>
			<uni-forms-item label="营业结束时间">
				<view @click="onSelectEndTime" class="area">{{baseFormData.endTime}}</view>
			</uni-forms-item>
			<view style="border: 1rpx solid #EAEAEA; margin:10rpx 0;"></view>
			<uni-forms-item label="服务类别">
				<uni-data-checkbox v-model="baseFormData.serviceIds" multiple :localdata="serviceTypes" />
			</uni-forms-item>
			<view style="border: 1rpx solid #fff; margin:10rpx 0;"></view>
			<uni-forms-item label-width="0">
				<uni-easyinput type="textarea" v-model="baseFormData.description" placeholder="请输入商家介绍" />
			</uni-forms-item>

		</uni-forms>
		<view style="border: 1rpx solid #fff; margin:10rpx 0;"></view>
		<view class="uploadImg">
			<view>身份证正面</view>
			<uni-file-picker fileMediatype="image" mode="grid" @select="selectFrontImg" @fail="fail" :limit="1" />
		</view>
		<view style="border: 1rpx solid #fff; margin:10rpx 0;"></view>
		<view class="uploadImg">
			<view>身份证反面</view>
			<uni-file-picker fileMediatype="image" mode="grid" @select="selectOppositeImg" @fail="fail" :limit="1" />
		</view>
		<view style="border: 1rpx solid #fff; margin:10rpx 0;"></view>
		<view class="uploadImg">
			<view>营业执照</view>
			<uni-file-picker fileMediatype="image" mode="grid" @select="selectBusinessLicenseImg" @fail="fail"
				:limit="1" />
		</view>
		<view style="border: 1rpx solid #fff; margin:10rpx 0;"></view>
		<view class="uploadImg">
			<view>门店照片</view>
			<uni-file-picker fileMediatype="image" mode="grid" @select="selecPhotoImg" @fail="fail" :limit="1" />
		</view>
		<xp-picker ref="timePicker" @confirm="handleSubmit" mode="hi" />
		<button type="primary" @click="submit()" style="margin-top: 20rpx;">注册</button>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	import areaData from '@/static/pca-code.js'
	export default {
		components: {
			LbPicker
		},
		data() {
			return {
				// 表单数据
				baseFormData: {
					director: '林黛玉',
					idCard: '130423200008010012',
					mobile: '13722379809',
					captcha: '',
					name: '林黛玉洗车店',
					businessLicenseId: '12345802266',
					address: '临漳县第一中学',
					description: '洗车很棒',
					range: '',
					serviceIds: [1,2],
					startTime: '10:40:00',
					endTime: '16:40:00',
					operatingArea: '河北省邯郸市临漳县',
					longitude: '114.591703',
					latitude: '36.331393',
					front: '', // 身份证正面照片					
					opposite: '', // 身份证反面照片					
					businessLicenseImg: '', // 营业执照照片					
					photo: '', // 门店照片
				},
				// 经营数据源
				range: [],
				myProps: {
					label: 'name',
					value: 'code',
					children: 'children'
				},
				areaValue: [],
				areaList: areaData,
				timeupSecond: 29,
				isAuthCode: false,
				serviceTypes: [],
				selectTime: true,
			}
		},
		methods: {
			btn() {
				this.$refs.picker.show()
			},
			areaConfirm(e) {
				console.log('confirm::', e)
				this.baseFormData.operatingArea = `${e.item[0].label}${e.item[1].label}${e.item[2].label}`
			},
			submit() {
				console.log(this.baseFormData);
				const address = this.baseFormData.operatingArea + this.baseFormData.address;
				uni.request({
					url: 'http://localhost:7000/auth/businessRegister',
					method: 'POST',
					data: this.baseFormData,
					success: (resp) => {
						if(resp==200){
							uni.showToast({
								title:'注册成功',
								icon:'success'								
							})
						}else{
							uni.showToast({
								title:resp.data.msg,
								icon:'error'								
							})
						}
					}
				})
			},
			isHide() {
				if (this.baseFormData.mobile === "") {
					return;
				}
				this.isAuthCode = true
				uni.request({
					url: "http://localhost:7000/auth/msg",
					method: 'POST',
					data:{
						mobile:this.baseFormData.mobile,
						resource:1
					},
					success: (resp) => {
						console.log(resp);
					}
				})
			},
			timeup() {
				this.isAuthCode = false
			},
			onSelectStartTime() {
				this.$refs.timePicker.show();
				this.selectTime = true;
			},
			onSelectEndTime() {
				this.$refs.timePicker.show();
				this.selectTime = false;
			},
			handleSubmit(e) {
				console.log(e);
				if (this.selectTime) {
					this.baseFormData.startTime = e.value.match(/^\d{2}:\d{2}/)[0] + ":00";
				} else {
					this.baseFormData.endTime = e.value.match(/^\d{2}:\d{2}/)[0] + ":00";
				}
			},
			//身份证正面图片上传
			selectFrontImg(e) {
				console.log(111);
				uni.uploadFile({
					url: 'http://localhost:7000/file/upload',
					filePath: e.tempFiles[0].path,
					formData: {
						'file': 'file'
					},
					success: (resp) => {
						const res = JSON.parse(resp.data)
						this.baseFormData.front = res.data.url;
					}
				});
			},
			//身份证反面图片上传
			selectOppositeImg(e) {
				uni.uploadFile({
					url: 'http://localhost:7000/file/upload',
					filePath: e.tempFiles[0].path,
					formData: {
						'file': 'file'
					},
					success: (resp) => {
						const res = JSON.parse(resp.data)
						this.baseFormData.opposite = res.data.url;
					}
				});
			},
			//营业执照图片上传
			selecPhotoImg(e) {
				uni.uploadFile({
					url: 'http://localhost:7000/file/upload',
					filePath: e.tempFiles[0].path,
					formData: {
						'file': 'file'
					},
					success: (resp) => {
						const res = JSON.parse(resp.data)
						this.baseFormData.businessLicenseImg = res.data.url
					}
				});
			},
			//门店照片图片上传
			selectBusinessLicenseImg(e) {
				uni.uploadFile({
					url: 'http://localhost:7000/file/upload',
					filePath: e.tempFiles[0].path,
					formData: {
						'file': 'file'
					},
					success: (resp) => {
						const res = JSON.parse(resp.data)
						this.baseFormData.photo = res.data.url
					}
				});
			},
		},
		onLoad() {
			uni.request({
				url: 'http://localhost:7000/business/serviceType/list',
				success: (resp) => {
					this.serviceTypes = resp.data.rows.map((item) => {
						return {
							text: item.name,
							value: item.id
						};
					});
				}
			})
		}
	}
</script>

<style>
	page {
		background-color: white;
		padding: 25rpx;
	}

	.uni-forms-item {
		margin-bottom: 0 !important;
	}

	.uploadImg {
		font-size: 28rpx;
		color: #606266;

	}

	.check {
		margin-left: auto;
		line-height: 70rpx;
		color: rgba(29, 111, 255, 1);
	}

	.uni-countdown {
		line-height: 70rpx !important;
		height: 70rpx !important;
	}

	.area {
		box-sizing: border-box;
		flex-direction: row;
		align-items: center;
		border: 1px solid #F0F0F0;
		border-radius: 8rpx;
		height: 70rpx;
		color: #999999;
		line-height: 70rpx;
		padding-left: 20rpx;
		font-size: 28rpx;
	}
</style>